
import React from 'react'
import ReactDOM from 'react-dom'
import * as WechatUserAction  from '../../actions/WechatUserAction';
import { connect }  from 'react-redux';

import WechatUserSettingTools from './WechatUserSettingTools'
import WechatUserSettingList from './WechatUserSettingList'
import WechatUserSettingEdit from './WechatUserSettingEdit'
import UnitBindDetail from '../units/UnitBindDetail'

import Paging from '../Paging'

class WechatUserSettingBody extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      activeData: {},
      search: "",
      activeDetailId: 0
    }
  }

  componentDidMount() {
    var self = this;
    this.$modal = $(ReactDOM.findDOMNode(this.refs.WechatUserSettingEdit))
    this.$detailModal = $(ReactDOM.findDOMNode(this.refs.UnitBindDetail))
    this.props.dispatch(
      WechatUserAction.loadWechatUserDataAsync()
    )
  }

  componentDidUpdate() {
    if (this.props.data === 403) {
      window.location.href = 'login'
    }
  }

  onDataSearch(text) {
    var self = this;
    this.props.dispatch(
      WechatUserAction.loadWechatUserDataAsync({
        offset: 0,
        limit: self.props.limit,
        unit_desc: text
      })
    )
    this.setState({
      search: text
    })
  }

  onEditClick(index) {
    if (index < this.props.data.length) {
      this.setState({
        activeData: this.props.data[index]
      })
      this.$modal.modal("show")
    }
  }

  onDeleteClick(index) {
    if (confirm("确定解除绑定吗？")) {
      // console.log("解除绑定")
      if (index < this.props.data.length) {
        var data = {
          id: this.props.data[index].id
        }
        data.offset = this.props.offset;
        data.limit = this.props.limit;
        data.unit_desc = this.state.search;
        this.props.dispatch(
          WechatUserAction.deleteWechatUserDataAsync(data)
        )
      }
    }
  }

  onDetailClick(unit_number) {
    this.setState({
      activeDetailId: unit_number
    })

    this.$detailModal.modal("show");
  }

  onPageChange(page) {
    var self = this;
    this.props.dispatch(
      WechatUserAction.loadWechatUserDataAsync({
        offset: (page-1)*this.props.limit,
        limit: self.props.limit,
        unit_desc: self.state.search
      })
    )
  }

  render() {
    var self = this;

    var offset = parseInt(this.props.offset),
        limit = parseInt(this.props.limit),
        count = parseInt(this.props.count)

    var current = Math.ceil(offset/limit) + 1;

    return (
      <div className="content-body WechatUser-content-body" >
        <WechatUserSettingTools
          onDataSearch = {this.onDataSearch.bind(self)}
          />
        <WechatUserSettingList
          data = {this.props.data}
          onEditClick = {this.onEditClick.bind(self)}
          onDeleteClick = {this.onDeleteClick.bind(self)}
          onDetailClick = {this.onDetailClick.bind(self)}
          />
        <Paging
          current = {current}
          count = {count}
          limit = {limit}
          onPageChange = {this.onPageChange.bind(self)}
        />
        <WechatUserSettingEdit
          ref = "WechatUserSettingEdit"
          data = {this.state.activeData}
          />
        <UnitBindDetail
          ref = "UnitBindDetail"
          activeDetailId = {this.state.activeDetailId}
          />
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
          data: state.wechatUsers.data,
          count: parseInt(state.wechatUsers.count),
          offset: parseInt(state.wechatUsers.offset),
          limit: parseInt(state.wechatUsers.limit)
         }
}

export default connect(mapStateToProps)(WechatUserSettingBody);
